<template>
  <div class="print-header-tool">
    <el-select
      class="tool-item-select"
      placeholder=""
      :disabled="!isText"
      :value="activeComponentConfig.fontFamily"
      @input="setValue('fontFamily', $event)"
    >
      <el-option
        v-for="item in fontFamilyOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span :style="{ fontFamily: item.value }">{{ item.label }}</span>
      </el-option>
    </el-select>
    <el-divider direction="vertical" />
    <el-select
      placeholder=""
      class="tool-item-select"
      :disabled="!isText"
      :value="activeComponentConfig.fontSize"
      @input="setValue('fontSize', $event)"
    >
      <el-option
        v-for="item in fontSizeOption"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span>{{ item.label }}</span>
      </el-option>
    </el-select>
    <el-divider direction="vertical" />
    <span
      :class="['tool-item', { disabled: !isText }]"
      :style="{
        backgroundColor:
          activeComponentConfig.fontWeight == 'bold' ? '#F1F1F1' : '',
      }"
      @click="
        setValue(
          'fontWeight',
          activeComponentConfig.fontWeight == 'bold' ? 'normal' : 'bold'
        )
      "
      ><i
        class="learun-icon-blod"
        :style="{
          color: activeComponentConfig.fontWeight == 'bold' ? '#5E95FF' : '',
        }"
      ></i>
    </span>
    <span
      :class="['tool-item', { disabled: !isText }]"
      :style="{
        backgroundColor:
          activeComponentConfig.fontStyle == 'oblique' ? '#F1F1F1' : '',
      }"
      @click="
        setValue(
          'fontStyle',
          activeComponentConfig.fontStyle == 'oblique' ? '' : 'oblique'
        )
      "
      ><i
        class="learun-icon-italic"
        :style="{
          color: activeComponentConfig.fontStyle == 'oblique' ? '#5E95FF' : '',
        }"
      ></i>
    </span>
    <span
      :class="['tool-item', 'mr-8', { disabled: !isText }]"
      :style="{
        backgroundColor:
          activeComponentConfig.textDecoration == 'underline' ? '#F1F1F1' : '',
      }"
      @click="
        setValue(
          'textDecoration',
          activeComponentConfig.textDecoration == 'underline' ? '' : 'underline'
        )
      "
      ><i
        class="learun-icon-underline"
        :style="{
          fontSize: '16px',
          color:
            activeComponentConfig.textDecoration == 'underline'
              ? '#5E95FF'
              : '',
        }"
      ></i>
    </span>
    <el-divider direction="vertical" />
    <div :class="['tool-item', { disabled: !isText }]">
      <div
        style="width: 24px; height: 30px;display: inline-block;"
        :style="{
          borderBottom: `4px solid ${activeComponentConfig.textColor || '#000'}`,
        }"
      >
        <img src="../../../assets/A.svg" style="height: 16px;" />
      </div>
      <div
        v-if="isText"
        style="
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        "
      >
        <l-input-color
          :notInput="true"
          :value="activeComponentConfig.textColor"
          @input="setValue('textColor', $event)"
        />
      </div>
    </div>
    <div
      :class="['tool-item', 'mr-8', { disabled: !activeComponentConfig.id }]"
    >
      <div
        style="
          width: 24px;
          height: 26px;
          display: inline-block;
          margin-top: 4px;
        "
        :style="{
          borderBottom: `4px solid ${activeComponentConfig.backgroundColor ||
            '#fff'}`,
        }"
      >
        <img src="../../../assets/bg.svg"  style="height: 21px;" />
      </div>
      <div
        v-if="activeComponentConfig.id"
        style="
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        "
      >
        <l-input-color
          :notInput="true"
          :value="activeComponentConfig.backgroundColor"
          @input="setValue('backgroundColor', $event)"
        />
      </div>
    </div>
    <el-divider direction="vertical" />
    <span
      :class="['tool-item', { disabled: !activeComponentConfig.id }]"
      @click="verticalFun('top')"
    >
      <img src="../../../assets/topAlign.svg"
    /></span>
    <span
      :class="['tool-item', { disabled: !activeComponentConfig.id }]"
      @click="verticalFun('center')"
      ><img src="../../../assets/verticalCenter.svg"
    /></span>
    <span
      :class="['tool-item', 'mr-8', { disabled: !activeComponentConfig.id }]"
      @click="verticalFun('bottom')"
      ><img src="../../../assets/bottomAlign.svg"
    /></span>
    <el-divider direction="vertical" />
    <span
      :class="['tool-item', { disabled: !activeComponentConfig.id }]"
      @click="horizontalFun('left')"
    >
      <img src="../../../assets/verticalLeft.svg"
    /></span>
    <span
      :class="['tool-item', { disabled: !activeComponentConfig.id }]"
      @click="horizontalFun('center')"
      ><img src="../../../assets/levelCenter.svg"
    /></span>
    <span
      :class="['tool-item', 'mr-8', { disabled: !activeComponentConfig.id }]"
      @click="horizontalFun('right')"
      ><img src="../../../assets/verticalRight.svg"
    /></span>
    <div  class="mr-8" style="text-align: right;flex-grow: 2;min-width: 160px;">
      <el-button
        type="primary"
        icon="el-icon-video-play"
        size="mini"
        @click="handlePreview"
        >{{$t('Preview')}}</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="mini"
       
        plain
        @click="handleClear"
        >{{$t(' Clear')}}</el-button
      >
    </div>
  </div>
</template>
<script>
import fontFamily from "../config/fontFamily";
import fontSize from "../config/fontSize";
export default {
  props: {
    activeComponent: {
      type: Object,
      default: () => ({}),
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    pageHeight: Number,
    pageWidth: Number,
  },
  data() {
    return {
      fontFamilyOptions: fontFamily,
      fontSizeOption: fontSize,
    };
  },
  computed: {
    activeComponentConfig() {
      if (this.activeComponent) {
        return this.activeComponent.config;
      }
      return {};
    },
    isText() {
      return this.activeComponentConfig.componentType == "text";
    },
  },
  methods: {


    setValue(prop, value) {
      this.$emit("setValue", { prop, value });
    },
    verticalFun(type) {
      if (this.activeComponentConfig.id) {
        let top = 0;
        switch (type) {
          case "center":
            top = (this.toPt(this.pageHeight) - this.activeComponentConfig.height)/2 - this.pageConfig.paddingTop
            break;
          case "bottom":
            top = this.toPt(this.pageHeight) - this.activeComponentConfig.height - this.pageConfig.paddingTop - this.pageConfig.paddingBottom
            break;
        }
        this.setValue("top", top);
      }
    },
    horizontalFun(type) {
      if (this.activeComponentConfig.id) {
        let left = 0;
        switch (type) {
          case "center":
            left = (this.$mmToPt(this.pageWidth) - this.activeComponentConfig.width)/2 - this.pageConfig.paddingLeft
            break;
          case "right":
            left = this.$mmToPt(this.pageWidth) - this.activeComponentConfig.width - this.pageConfig.paddingLeft - this.pageConfig.paddingRight
            break;
        }
        this.setValue("left", left);
      }
    },
    handlePreview() {
      this.$emit('preview');
    },
    handleClear() {
      this.$confirm(this.$t("是否 Clear当前页?"), this.$t("Tips"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      }).then(() => {
        this.$emit('clear');
      });
    }
  },
};
</script>

<style lang="scss">
.print-header-tool {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  background: #f8f8f8;
  border-bottom: 1px solid #dddddd;

  .icons {
    font-size: 12px;
    margin-left: 8px;
  }

  .tool-item-select {
    width: 160px;

    .el-input__inner {
      border: none;
      background-color: #f8f8f8 !important;
    }
  }

  .tool-item {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-left: 8px;
    position: relative;
    cursor: pointer;

    &:hover:not(&.disabled) {
      background-color: #f1f1f1;
    }

    &.disabled {
      cursor: not-allowed;
    }

    img {
      height: 16px;
    }
  }

  &__btns {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    padding-right: 8px;
  }
}
</style>
